<template>
  <div class="gk-layout-container">
    <div class="gk-layout-header">
      <!--工具栏-->
      <s-query perms="corewh:corewhloc" @click="findPage">
        <el-form-item>
          <el-select v-model="filters.areaId" :placeholder="$t('field.Core.corewhloc.Please enter the areaName')"
            auto-complete="off" style="width: 100%;" clearable filterable>
            <el-option v-for="item in areaTypes" :key="item.Id" :label="item.areaName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input style="width: 100px;" v-model="filters.rowNumber"
            :placeholder="$t('field.Core.corewhloc.Please enter the rowNumber')" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input style="width: 100px;" v-model="filters.endRowNumber" placeholder="终止层" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input style="width: 100px;" v-model="filters.colNumber"
            :placeholder="$t('field.Core.corewhloc.Please enter the colNumber')" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input style="width: 100px;" v-model="filters.endColNumber" placeholder="终止列" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="filters.shelfId" placeholder="请输入货架号" auto-complete="off" clearable
            onkeyup="value=value.replace(/[^1-9]/g,'')">
          </el-input>
        </el-form-item>

        <s-dict name="ActiveStatus" v-model="filters.activeStatus"> </s-dict>

      </s-query>
      <s-reflash reflash="true" @findPage="findPage"> </s-reflash>
    </div>
    <!--表格内容栏-->


    <div class="gk-layout-main">
      <my-table :data="pageResult.content" :loading="loading" @selection-change="selectionChange">
        <el-table-column :label="$t('action.desc')" width="50" fixed="left" header-align="center" align="center">
          <template slot-scope="scope"> {{ scope.$index + 1 }} </template>
        </el-table-column>
        <el-table-column type="selection" width="40"></el-table-column>
        <Column prop="id" label="编号" />
        <Column prop="maxStock" label="容量" />
        <Column prop="countStock" label="库存" />
        <Column prop="countIn" label="入库中" />
        <Column prop="countOut" label="出库中" />
        <Column prop="countOutin" label="出入库" />
        <Column width="300" prop="areaId" :label="$t('field.Core.corewhloc.areaName')" :formatter=selectionFormat />
        <Column prop="activeStatus" label="库位状态" :formatter="selectionFormat1" />
        <el-table-column header-align="center" align="center" :label="$t('action.operation')">
          <template slot-scope="scope">
            <kt-button :label="$t('action.edit')" perms="corewh:corewhloc:batchEdit"
              @click="handleEdit(scope.$index, scope.row)" />
          </template>
        </el-table-column>
      </my-table>
    </div>
    <!--分页栏-->
    <div class="toolbar gk-layout-footer" style="padding:10px;">
      <kt-button label="批量编辑" perms="corewh:corewhloc:batchEdit" :size="global.gSize" type="danger"
        @click="handleBatchEdit()" disable style="float:left;" :disabled="this.selections.length == 0" />
      <el-pagination layout="total, prev, pager, next, jumper" @current-change="findPage" :current-page="filters.pageNum"
        :page-size="filters.pageSize" :total="pageResult.totalSize" style="float:right;">
      </el-pagination>
    </div>

    <!--新增编辑界面-->
    <el-dialog :title="operation ? $t('action.add') : '库位 —— 编辑'" width="80%" :visible.sync="dialogVisible"
      :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" :size="global.gSize"
        label-position="right">
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm.id" disabled="true" auto-complete="off"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('field.Core.corewhloc.craneName')" prop="craneId">
              <el-input v-model="dataForm.craneId" auto-complete="off" disabled="false"></el-input>
            </el-form-item>
            <el-form-item :label="$t('field.Core.corewhloc.ShelfId')" prop="shelfId">
              <el-input v-model="dataForm.shelfId" auto-complete="off" disabled="false"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('field.Core.corewhloc.areaName')" prop="areaId">
              <el-select v-model="dataForm.areaId" placeholder="请选择" auto-complete="off" style="width: 100%;" clearable
                filterable>
                <el-option v-for="item in areaTypes" :key="item.id" :label="item.areaName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('field.Core.corewhloc.row')" prop="line">
              <el-input v-model="dataForm.rowNumber" auto-complete="off" disabled="false"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('field.Core.corewhloc.col')" prop="col">
              <el-input v-model="dataForm.colNumber" auto-complete="off" disabled="false"></el-input>
            </el-form-item>
            <el-form-item :label="$t('field.Core.corewhloc.type')" prop="type">
              <el-input v-model="dataForm.type" auto-complete="off" disabled="false"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('field.Core.corewhloc.orderNo')" prop="orderNo">
              <el-input v-model="dataForm.orderNo" auto-complete="off" disabled="false"></el-input>
            </el-form-item>
            <s-dict-form name="ActiveStatus" v-model="dataForm.activeStatus" />

          </el-col>
        </el-row>
        <el-row>


        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('field.Core.corewhloc.maxstock')" prop="maxstock">
              <el-input v-model="dataForm.maxStock" auto-complete="off" disabled="false"></el-input>
            </el-form-item>
            <el-form-item :label="$t('field.Core.corewhloc.stockCount')" prop="stockCount">
              <el-input v-model="dataForm.stockCount" auto-complete="off" disabled="false"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('field.Core.corewhloc.movegroup')" prop="moveGroup">
              <el-input v-model="dataForm.moveGroup" auto-complete="off" disabled="false"></el-input>
            </el-form-item>


            <el-form-item :label="$t('field.Core.corewhloc.deepIndex')" prop="deepIndex">
              <el-input v-model="dataForm.deepIndex" auto-complete="off" disabled="false"></el-input>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="global.gSize" @click.native="dialogVisible = false">{{ $t('action.cancel') }}</el-button>
        <el-button :size="global.gSize" type="primary" @click.native="submitForm" :loading="editLoading">{{
          $t('action.submit') }}
        </el-button>
      </div>
    </el-dialog>
    <!--批量编辑界面-->
    <el-dialog :title="operation ? '库位 —— 批量编辑' : $t('action.edit')" width="50%" :visible.sync="dialogVisibles"
      :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" :size="global.gSize"
        label-position="right">
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('field.Core.corewhloc.areaName')" prop="areaId">
          <el-select v-model="dataForm.areaId" placeholder="请选择" auto-complete="off" style="width: 100%;" clearable
            filterable>
            <el-option v-for="item in areaTypes" :key="item.id" :label="item.areaName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="global.gSize" @click.native="dialogVisibles = false">{{ $t('action.cancel') }}</el-button>
        <el-button :size="global.gSize" type="primary" @click.native="submitForms" :loading="editLoading">
          {{ $t('action.submit') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import Column from "@/views/Core/Column"
import MyTable from "@/views/Core/MyTable"
import KtButton from "@/views/Core/KtButton"
import SQuery from "@/components/Kj/SQuery"
import SReflash from "@/components/Kj/SReflash"
import { format } from "@/utils/datetime"
import { dictsFormat, getItemName } from "@/utils/myUtil"
import SDictForm from "@/components/Kj/SDictForm"
import SDict from "@/components/Kj/SDict"
export default {
  components: {
    PopupTreeInput,
    KtButton,
    Column,
    MyTable,
    SReflash,
    SQuery,
    SDict,
    SDictForm
  },
  data() {
    return {
      size: 'small',
      filters: {
        name: '', pageNum: 1, pageSize: 400
      },
      loading: false,
      demo: [],
      selections: [],
      pageResult: {},
      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      dialogVisibles: false,//批量编辑界面是否显示
      editLoading: false,
      // 新增编辑界面数据
      dataForm: {
        id: 0,
        craneId: '',
        shelfId: '',
        areaId: '',
        line: '',
        col: '',
        type: '',
        orderNo: '',
        activeStatus: '',
        deepIndex: '',
        width: '',
        high: '',
        deep: '',
        maxstock: '',
        stockCount: '',
        moveGroup: '',
      },
      areaTypes: [],
      locStatus: []
    }
  },
  computed: {
    dataFormRules() {
      const dataFormRules = {
        name: [{ required: true, message: this.getKey("user.userInput"), trigger: 'blur' }]
      };
      return dataFormRules;
    }
  },
  methods: {
    // 获取分页数据
    findPage: function (data) {
      if (data != -1) {
        this.filters.pageNum = data
      }

      this.$api.corewhloc.findPage(this.filters).then((res) => {
        this.pageResult = res.data
        //this.findUserRoles()
      })
    },
    selectionChange: function (selection) {

      this.selections = selection;
    },
    // 批量删除
    handleDelete: function (data) {
      this.$api.corewhloc.batchDelete(data.params)
    },
    // 显示新增界面
    handleAdd: function () {
      this.dialogVisible = true
      this.operation = true
      this.dataForm = {
        id: 0,
        craneId: '',
        shelfId: '',
        areaId: '',
        line: '',
        col: '',
        type: '',
        orderNo: '',
        activeStatus: '',
        deepIndex: '',
        width: '',
        high: '',
        deep: '',
        maxstock: '',
        stockCount: '',
        moveGroup: '',
        // Types: ['1', '2']
      }
      areaTypes: []
    },
    // 显示编辑界面
    handleEdit: function (params, row) {
      this.dialogVisible = true
      this.operation = false
      this.dataForm = Object.assign({}, row)
    },
    //显示批量编辑界面
    handleBatchEdit: function () {

      let ids = this.selections.map(item => item.id).toString()

      let params = []
      let idArray = (ids + '').split(',')
      for (var i = 0; i < idArray.length; i++) {
        params.push({ 'id': idArray[i] })
      }
      this.demo = params
      this.dialogVisibles = true
      this.operation = true

    },
    // 编辑
    submitForm: function () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.$confirm(this.getKey('action.isConfirm'), this.getKey('action.tips'), {}).then(() => {
            this.editLoading = true
            let params = Object.assign({}, this.dataForm)
            this.$api.corewhloc.save(params).then((res) => {
              this.editLoading = false
              if (res.code == 200) {

                this.$message({ message: this.getKey('action.operateSucess'), type: 'success' })
                this.dialogVisible = false
                this.$refs['dataForm'].resetFields()

              } else {
                this.$message({ message: this.getKey('action.operateFail') + res.msg, type: 'error' })
              }
              this.findPage(-1)
            })
          })
        }
      })
    },
    //批量编辑
    submitForms: function () {

      let ppa = [];
      for (var i = 0; i < this.demo.length; i++) {

        ppa.push(this.demo[i].id)
      }



      this.$refs.dataForm.validate((valid) => {
        if (valid) {

          this.$confirm(this.getKey('action.isConfirm'), this.getKey('action.tips'), {}).then(() => {
       
            this.editLoading = true
            let params = Object.assign({}, this.dataForm).areaId
            this.$api.corewhloc.batchedit(ppa, params).then((res) => {

           
              this.editLoading = false
              if (res.code == 200) {
                this.$message({ message: this.getKey('action.operateSucess'), type: 'success' })
                this.dialogVisibles = false
                this.$refs['dataForm'].resetFields()
              } else {
                this.$message({ message: this.getKey('action.operateFail') + res.msg, type: 'error' })
              }
              this.findPage(-1)
            })
          })
        }
      })
    },




    getKey: function (arg) {
      return this.$t(arg)
    },

    // 处理表格列过滤显示

    selectionFormat: function (row, column, cellValue, index) {
      let key = ""
      let propt = column.property;
      let val = row[column.property];
      let dict = this.areaTypes;
      for (let i = 0; i < dict.length; i++) {
        if (dict[i].id == val) {
          return dict[i].areaName;
        }
      }
      return row[column.property]

    },
    selectionFormat1: function (row, column, cellValue, index) {
      return dictsFormat("ActiveStatus", cellValue)
    },
  },
  created() {
    this.$api.corewharea.findPage().then((res) => {
      this.areaTypes = res.data.content
    })
    this.findPage(1);
  }
}
</script>
<style scoped></style>